<template>
  <div class="secnic-video-set">
    <v-header ref="header" title="实时视频" :fixed="true"></v-header>
    <ul ref="videoSet" class="video-set" v-show="videoList.length > 0" >
      <li v-for="(video, index) in videoList" :key="index">
        <p>{{video.name || '无视频描述'}}</p>
        <video :src="video.videoUrl" controls="controls" preload="preload" height="310px" width="100%">
          您的浏览器不支持 video 标签。
        </video>
      </li>
    </ul>
    <not-data v-if="videoList.length === 0" tip="暂无景区视频" style="margin-top: 150px"></not-data>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import NotData from '@/components/not-data/not-data'

import axios from '@/api/axiosApi'

export default {
  data () {
    return {
      videoList: []
    }
  },
  components: {
    VHeader, NotData
  },
  created() {
    this._getVideoSet()
  },
  mounted() {
    this.$refs.videoSet.style.paddingTop = this.$refs.header.$el.children[0].clientHeight + 'px'
  },
  methods: {
    _getVideoSet() {
      axios.get(this, '/v1/scenicVideo', {
        belongScenic: this.$route.params.id
      }, (data) => {
        if (data == null || data.length === 0) {
          this.$vux.toast.text('暂无景区视频', 'middle')
          return
        }
        this.videoList = data
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.scenic-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.video-set
  li
    margin-bottom 20px
    background #ffffff
    p
      font-size 15px
      color #333
      padding 16px 16px 16px
      border-bottom 1px solid #e2e2e2
</style>

